<template>
  <div style="display: flex;">
    <div :style="{width:(isCollapse?'64px':'208px')}">
      <el-menu
          background-color="#3c82f5"
          style="width: 100%;height: 100vh;"
          text-color="#fff"
          active-text-color="#ff0"
          unique-opened
          router
          :collapse="isCollapse"
          :collapse-transition="false"
      >
<!--        从这里往下开始需要修改-->
        <el-row>
          <el-col :span="2"></el-col>
          <el-col :span="2">
            <el-avatar></el-avatar>
          </el-col>
          <el-col>
            <span>智慧车辆</span>
          </el-col>
        </el-row>

        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px"><User/></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>


      </el-menu>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";

const isCollapse = ref(false);
const changeCollapsed = () =>{
  isCollapse.value = !isCollapse.value;
}
</script>
